<style lang="stylus" scoped>
@import 'qweather-icons/font/qweather-icons.css';

.tri-maker {
  background: linear-gradient(135deg, #074c86, #386655, #529473);
  text-align: center;
  flex-direction: row;
  height: 100%;
}

.info {
  padding: 0 0 0 0;

  .title {
    margin-top: 30px;
    font-size: 18px;
    color: #ffffff;
  }

  .desc {
    font-size: 80px;
    color: #ffffff;
    line-height: 0;
  }
}
</style>

<template>

  <div :class="{
    'tri-maker': true,
    'tri-maker-small': widgetsSize === BookmarkSize.small,
    'tri-maker-medium': widgetsSize === BookmarkSize.medium,
    'tri-maker-large': widgetsSize === BookmarkSize.large,
      }" :style="{
        backgroundColor: widgetsUndercoat,
        color: textColor
      }" @click="handleClick">

    <div v-if="widgetsSize == BookmarkSize.small" style="font-size: 20px; color: #fff" @mouseenter="onMouseEnter" @mouseleave="onMouseleave">
      <div v-if="!showText">
        <i :class="[weather.icon]" style="font-size: 35px;"> </i>
      </div>
      <div v-if="showText">
        <div class="title">
          <span> {{ weather.temperature }}°C {{ city.cityName }}</span>
        </div>
      </div>
    </div>

    <div v-if="widgetsSize == BookmarkSize.medium || widgetsSize == BookmarkSize.large"
      style="font-size: 20px; color: #fff">
      <div> <i :class="[weather.icon]" style="font-size: 40px"></i></div>
      <div class="title">
        <span>{{ weather.temperature }}°C</span>
        <span style="margin-left: 10%">{{ weather.description }}</span>
      </div>
      <div class="desc">
        <p style="margin-left: 60%">{{ city.cityName }}</p>
      </div>
    </div>



    <v-modal v-model="editModalVisible" :width="400">
      <div style="padding: 20px">
        <weather-editor :cityData="city" @confirm="handleDataChange" @detail="handleDetail" />
      </div>
    </v-modal>

  </div>
</template>

<script lang="ts">
import { bookmarkUpdateService } from '@database/services/bookmark-service';
import { ref, computed, onMounted, watch, nextTick } from 'vue';
import { splitInFirstColon } from '@/assets/ts/utils';
import { Bookmark, BookmarkSize } from '@database/entity/bookmark';
import { City } from '@database/entity/weather';
import { openBookmark } from '@/assets/ts/bookmark-utils';
import WeatherEditor from './weather-editor.vue';
export default {
  name: 'WeatherComponent',
  components: { WeatherEditor },
  props: {
    data: {
      type: Bookmark,
      default() {
        return new Bookmark({});
      },
    },
  },
  setup(props: { data: Bookmark; params: string }) {
    const quickInput = ref('');
    const widgetsSize = computed(() => props.data.size);
    const editModalVisible = ref(false);
    const defaultUndercoat = '#2B393D';
    const showText = ref(false as boolean);
    const widgetsUndercoat = computed(
      () => props.data.undercoat || defaultUndercoat
    );
    const weather = ref({
      key: '096a5554c40347f3af10f33d17638bd7',
      temperature: '32',
      icon: 'qi-100',
      description: '多云',
      fxLink: 'https://www.qweather.com/',
    });

    const city = ref({ cityCode: '101220101', cityName: '合肥' } as City);
    watch(
      () => props.data.value,
      async (value: string | boolean) => {
        if (typeof value === 'string') {
          const [widgetsType, widgetsParams] = splitInFirstColon(value);
          if (widgetsParams) {
            const paramsSeprator = '-|-';
            const [cityCodeParams, cityNameParams] = widgetsParams.split(paramsSeprator);
            city.value.cityCode = cityCodeParams;
            city.value.cityName = cityNameParams;
            await nextTick();
            fetchWeather();
          }
        }
      },
      {
        immediate: true,
      }
    );

    const textColor = ref(defaultUndercoat);
    const fetchWeather = async () => {
      const url = 'https://devapi.qweather.com/v7/weather/now?location=' + city.value.cityCode + '&key=' + weather.value.key;
      const response = await fetch(url);
      const res = await response.json();
      weather.value.fxLink = res.fxLink;
      weather.value.icon = 'qi-' + res.now.icon;
      weather.value.temperature = res.now.temp;
      weather.value.description = res.now.text;
    };
    onMounted(() => {
      fetchWeather();
    });

    return {
      BookmarkSize,
      widgetsSize,
      quickInput,
      textColor,
      widgetsUndercoat,
      weather,
      city,
      showText,
      handleSelected(index: number) {
        openBookmark(props.data, {
          widgetsData: {
            defaultIndex: index,
          },
        });
      },
      editModalVisible,
      handleClick() {
        editModalVisible.value = true;
      },
      handleDataChange(params: { undercoat: string; value: string }) {
        props.data.undercoat = params.undercoat;
        props.data.value = params.value;
        bookmarkUpdateService(props.data);
        editModalVisible.value = false;
      },
      handleDetail() {
        editModalVisible.value = false;
      },
      onMouseEnter() {
        showText.value = true;
      },
      onMouseleave() {
        showText.value = false;
      }
    };
  },
};
</script>
